<template>
    <div style="padding-left: 17px;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-office-building"></i> 机构管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>机构审核</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-tabs v-model="message">
                <el-tab-pane :label="`未审批(${unread.length})`" name="first">
                    <el-table :data="unread" :show-header="false" style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <span
                                    class="message-title"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >{{scope.row.title}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="time" width="180"></el-table-column>
                        <el-table-column width="120">
                            <template slot-scope="scope">
                                <el-button
                                    size="small"
                                    type="primary"
                                    @click="handleEdit(scope.$index, scope.row)"
                                >查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 查看弹出框 -->
                    <el-dialog title="审核" :visible.sync="editVisible" width="40%">
                        <el-form
                            ref="form"
                            :model="form"
                            label-width="100px"
                            style="font-size: 15px;font-weight: 700;"
                        >
                            <el-form-item label="机构名称：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.title}}</span>
                            </el-form-item>
                            <el-form-item label="联系人姓名：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.pname}}</span>
                            </el-form-item>
                            <el-form-item label="联系人电话：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.phone}}</span>
                            </el-form-item>
                            <el-form-item label="机构网站：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.website}}</span>
                            </el-form-item>
                            <el-form-item label="行业类型：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.itype}}</span>
                            </el-form-item>
                            <el-form-item label="经营项目：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.item}}</span>
                            </el-form-item>
                            <el-form-item label="注册资金：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.fund}}</span>
                            </el-form-item>
                            <el-form-item label="申请时间：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.time}}</span>
                            </el-form-item>
                        </el-form>

                        <span slot="footer" class="dialog-footer">
                            <el-button @click="editVisible = false">取 消</el-button>
                            <el-button type="danger" @click="handleDel(index)">驳 回</el-button>
                            <el-button type="success" @click="handleRead(index)">通 过</el-button>
                        </span>
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane :label="`已审批(${read.length})`" name="second">
                    <template v-if="message === 'second'">
                        <el-table :data="read" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.title}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="time" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button
                                        type="primary"
                                        @click="handleEdit2(scope.$index, scope.row)"
                                    >查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <!-- 查看弹出框 -->
                    <el-dialog title="审核" :visible.sync="editVisible2" width="40%">
                        <el-form
                            ref="form"
                            :data="form"
                            :model="form"
                            label-width="100px"
                            style="font-size: 15px;font-weight: 700;"
                        >
                            <el-form-item label="机构名称：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.title}}</span>
                            </el-form-item>
                            <el-form-item label="联系人姓名：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.pname}}</span>
                            </el-form-item>
                            <el-form-item label="联系人电话：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.phone}}</span>
                            </el-form-item>
                            <el-form-item label="机构网站：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.website}}</span>
                            </el-form-item>
                            <el-form-item label="行业类型：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.itype}}</span>
                            </el-form-item>
                            <el-form-item label="经营项目：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.item}}</span>
                            </el-form-item>
                            <el-form-item label="注册资金：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.fund}}</span>
                            </el-form-item>
                            <el-form-item label="申请时间：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.time}}</span>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="editVisible2 = false">取 消</el-button>
                        </span>
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane :label="`已驳回(${recycle.length})`" name="third">
                    <template v-if="message === 'third'">
                        <el-table :data="recycle" :show-header="false" style="width: 100%">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <span class="message-title">{{scope.row.title}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="time" width="150"></el-table-column>
                            <el-table-column width="120">
                                <template slot-scope="scope">
                                    <el-button
                                        type="primary"
                                        @click="handleEdit3(scope.$index, scope.row)"
                                    >查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <!-- 查看弹出框 -->
                    <el-dialog title="审核" :visible.sync="editVisible3" width="40%">
                        <el-form
                            ref="form"
                            :data="form"
                            :model="form"
                            label-width="100px"
                            style="font-size: 15px;font-weight: 700;"
                        >
                            <el-form-item label="机构名称：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.title}}</span>
                            </el-form-item>
                            <el-form-item label="联系人姓名：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.pname}}</span>
                            </el-form-item>
                            <el-form-item label="联系人电话：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.phone}}</span>
                            </el-form-item>
                            <el-form-item label="机构网站：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.website}}</span>
                            </el-form-item>
                            <el-form-item label="行业类型：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.itype}}</span>
                            </el-form-item>
                            <el-form-item label="经营项目：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.item}}</span>
                            </el-form-item>
                            <el-form-item label="注册资金：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.fund}}</span>
                            </el-form-item>
                            <el-form-item label="申请时间：">
                                <span
                                    style="font-size: 14px;color: rgb(75, 65, 212);font-weight: 400;"
                                >{{form.time}}</span>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="editVisible3 = false">取 消</el-button>
                            <el-button @click="handleRestore(index)">还原</el-button>
                        </span>
                    </el-dialog>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import Qs from 'qs';
export default {
    name: 'tabs',
    data() {
        return {
            message: 'first',
            showHeader: false,
            editVisible: false,
            editVisible2: false,
            editVisible3: false,
            index: '',
            form: {
                id: null,
                title: null, //机构名称
                pname: null, //联系人姓名
                phone: null, //联系人电话
                website: null, //机构网站
                itype: null, //行业类型
                item: null, //经营项目
                fund: null, //注册资金
                examine: null, //审核状态
                time: null //申请时间
            },
            unread: [], //已审批
            read: [], //未审批
            recycle: [] //已驳回
        };
    },
    created() {
        this.$http
            .post(
                '/api/api/user/examine',
                Qs.stringify({
                    name: $cookies.get('tokenuser'), //用户账号
                    form: $cookies.get('tokenform'), //用户身份（0公司 1机构 2客服）
                    token: $cookies.get('tokenpa').token //当前登录令牌
                }),
                { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
            )
            .then(obtain => {
                if (obtain.body.code == 200) {
                    // console.log(obtain.body.data.not);
                    this.unread = obtain.body.data.not; //已审批
                    this.read = obtain.body.data.too; //未审批
                    this.recycle = obtain.body.data.rebut; //已驳回
                } else {
                    this.$cookies.remove('tokenpa'); //删除账号
                    this.$cookies.remove('tokenpower'); //删除用户身份
                    this.$cookies.remove('tokenform'); //删除登录令牌
                    this.$cookies.remove('tokenuser'); //删除账号
                    this.$message.error({
                        message: obtain.body.msg,
                        duration: 1000,
                        onClose: function() {
                            window.location = './login';
                            //this.$router.push('/login');
                        }
                    });
                }
            })
            .catch(fail => {
                this.$message.error({
                    message: '服务器请求失败...'
                });
            });
    },
    methods: {
        //通过审批
        handleRead(index) {
            this.$http
                .post(
                    '/api/api/user/examinemod',
                    Qs.stringify({
                        name: $cookies.get('tokenuser'), //用户账号
                        form: $cookies.get('tokenform'), //用户身份（0公司 1机构 2客服）
                        token: $cookies.get('tokenpa').token, //当前登录令牌
                        id: this.form.id, //当前登录令牌
                        state: 1 //审核状态(0未审核 1已审核 2驳回)
                    }),
                    { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                )
                .then(obtain => {
                    if (obtain.body.code == 200) {
                        const item = this.unread.splice(this.idx, 1);
                        this.read = item.concat(this.read);
                        this.editVisible = false;
                        this.$message.success(obtain.body.msg);
                    } else {
                        this.$message.error(obtain.body.msg);
                    }
                })
                .catch(fail => {
                    this.$message.error({
                        message: '服务器请求失败...'
                    });
                });
        },
        //驳回审批
        handleDel(index) {
            this.$http
                .post(
                    '/api/api/user/examinemod',
                    Qs.stringify({
                        name: $cookies.get('tokenuser'), //用户账号
                        form: $cookies.get('tokenform'), //用户身份（0公司 1机构 2客服）
                        token: $cookies.get('tokenpa').token, //当前登录令牌
                        id: this.form.id, //当前登录令牌
                        state: 2 //审核状态(0未审核 1已审核 2驳回)
                    }),
                    { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                )
                .then(obtain => {
                    if (obtain.body.code == 200) {
                        const item = this.unread.splice(this.idx, 1);
                        this.recycle = item.concat(this.recycle);
                        this.editVisible = false;
                        this.$message.success(obtain.body.msg);
                    } else {
                        this.$message.error(obtain.body.msg);
                    }
                })
                .catch(fail => {
                    this.$message.error({
                        message: '服务器请求失败...'
                    });
                });
        },
        //还原审批
        handleRestore(index) {
            this.$http
                .post(
                    '/api/api/user/examinemod',
                    Qs.stringify({
                        name: $cookies.get('tokenuser'), //用户账号
                        form: $cookies.get('tokenform'), //用户身份（0公司 1机构 2客服）
                        token: $cookies.get('tokenpa').token, //当前登录令牌
                        id: this.form.id, //当前登录令牌
                        state: 0 //审核状态(0未审核 1已审核 2驳回)
                    }),
                    { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                )
                .then(obtain => {
                    if (obtain.body.code == 200) {
                        const item = this.recycle.splice(this.idx, 1);
                        this.unread = item.concat(this.unread);
                        this.editVisible3 = false;
                        this.$message.success(obtain.body.msg);
                    } else {
                        this.$message.error(obtain.body.msg);
                    }
                })
                .catch(fail => {
                    this.$message.error({
                        message: '服务器请求失败...'
                    });
                });
        },
        //查看 1
        handleEdit(index, row) {
            this.idx = index;
            this.form.id = row.id; //id
            this.form.title = row.title; //机构名称
            this.form.pname = row.pname; //联系人姓名
            this.form.phone = row.phone; //联系人电话
            this.form.website = row.website; //机构网站
            this.form.itype = row.itype; //行业类型
            this.form.item = row.item; //经营项目
            this.form.fund = row.fund; //注册资金
            this.form.examine = row.examine; //审核状态
            this.form.time = row.time; //更新时间
            this.editVisible = true;
        },
        //查看 2
        handleEdit2(index, row) {
            this.idx = index;
            this.form.id = row.id; //id
            this.form.title = row.title; //机构名称
            this.form.pname = row.pname; //联系人姓名
            this.form.phone = row.phone; //联系人电话
            this.form.website = row.website; //机构网站
            this.form.itype = row.itype; //行业类型
            this.form.item = row.item; //经营项目
            this.form.fund = row.fund; //注册资金
            this.form.time = row.time; //注册资金
            this.editVisible2 = true;
        },
        //查看 3
        handleEdit3(index, row) {
            this.idx = index;
            this.form.id = row.id; //id
            this.form.title = row.title; //机构名称
            this.form.pname = row.pname; //联系人姓名
            this.form.phone = row.phone; //联系人电话
            this.form.website = row.website; //机构网站
            this.form.itype = row.itype; //行业类型
            this.form.item = row.item; //经营项目
            this.form.fund = row.fund; //注册资金
            this.form.time = row.time; //注册资金
            this.editVisible3 = true;
        }
    },
    computed: {
        unreadNum() {
            return this.unread.length;
        }
    }
};
</script>

<style>
.message-title {
    cursor: pointer;
}
.handle-row {
    margin-top: 30px;
}
</style>

